// scope.row 表示这一行的属性，可以scope.row.xxx
<template>
  <!-- 用户账号列表页面 -->
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>账号列表</span>
    </div>
    <el-button type="danger" size="small" @click="batchdel">批量删除</el-button>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <!-- prop对应列内容的字段名 -->
      <el-table-column label="账号">
        <template slot-scope="scope">
          <span v-show="!scope.row.isedit">{{ scope.row.account }}</span>
          <el-input
            v-show="scope.row.isedit"
            v-model="scope.row.account"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="用户组">
        <template slot-scope="scope">
          <span v-show="!scope.row.isedit">{{ scope.row.userGroup }}</span>
          <el-input
            v-show="scope.row.isedit"
            v-model="scope.row.userGroup"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="ctime" label="创建时间" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope)">{{
            scope.row.isedit ? "确定" : "编辑"
          }}</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>

<script>
// 引封装的账号列表接口
import {
  userList,
  userDel,
  userBatchDel,
  useredit,
} from "../../../../api/apis";
// 引封装的获取时间的函数
import { getTime } from "../../../utils/utils";
export default {
  data() {
    return {
      tableData: [], //表格的数据
      currentPage: 1, //当前页码
      pageSize: 5, //每页条数
      total: 100, //数据总条数
      loading: true, //加载
    };
  },
  methods: {
    // ---------------------------------------分页操作的函数-----------------------------------
    // 点击每页显示数据的条数之后的变化事件
    handleSizeChange(newPageSize) {
      this.pageSize = newPageSize;
      this.getUserList(); //调用函数
    },
    // 点击之后当前页码之后变化事件
    handleCurrentChange(newPage) {
      this.currentPage = newPage; //让当前的页码==鼠标点击的页码
      this.getUserList(); //调用函数
    },

    // ----------------------------------表格table操作的函数----------------------------------
    //封装函数获取

    getUserList() {
      this.loading = true; //只要一请求数据就得加载
      userList(this.currentPage, this.pageSize).then((res) => {
        let arr = res.data.data;
        for (let obj of arr) {
          obj.ctime = getTime(obj.ctime);
          obj.isedit = false; //自己手动添加的属性，让编辑为false
        }
        this.tableData = arr; //解构
        // console.log(this.tableData); 查看列表里面的内容
        this.total = res.data.total;
        this.loading = false; //数据加载出来后就让加载消失
      });
    },

    // -----------------------批量删除操作管理------------------------------------
    // 1.复选框变化
    handleSelectionChange(arr) {
      var ids = arr.map((item) => item.id); //map函数
      this.ids = JSON.stringify(ids);
      console.log(this.ids); //[84, 86, 87, 91, 92, 93]
    },
    //2.批量删除按钮
    batchdel() {
      this.$confirm("此操作将永久删除所选账号, 是否继续?", "美团系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //批量删除数据,获取接口
          userBatchDel(this.ids).then((res) => {
            if (res.data.code == 0) this.getUserList();
          });

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //------------------- ---------------------------删除和编辑操作----------------------------------
    // 1.点击编辑按钮
    handleEdit(scope) {
      if (scope.row.isedit) {
        // 调后台接口函数，发请求，实现改变数据就能发数据发给后台
        // 后台函数(scope.row.xxx).then()
        useredit(scope.row).then((res) => {
          if (res.data.code == 0) {
            this.$message({
              message: "美团系统，账号列表已修改",
              type: "success",
            });
          } else {
            this.$message({
              message: "美团系统，账号列表修改失败",
              type: "error",
            });
          }
        });
        // 关闭编辑状态
        scope.row.isedit = false;
      } else {
        //打开编辑状态
        scope.row.isedit = true;
      }
    },
    // 2.删除按钮
    handleDelete(scope) {
      // 获取鼠标点击那行的id
      this.$confirm("此操作将永久删除该账号, 是否继续?", "美团系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //删除数据,获取接口
          userDel(scope.row.id).then((res) => {
            if (res.data.code == 0) this.getUserList();
          });

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  // 一进来就发送请求
  created() {
    this.getUserList();
    // userList(1, 10).then((res) => {
    //   // account: "acc200"   账号
    //   // ctime: "2022-01-23T14:35:49.000Z" 注册时间
    //   // id: 178   id
    //   // imgUrl: "default.jpg" 图片
    //   // userGroup: "普通用户" 用户组
    //   // 先把时间转为标准时间再赋值
    //   let arr = res.data.data;
    //   for (let obj of arr) {
    //     obj.ctime = getTime(obj.ctime);
    //   }
    //   this.tableData = arr; //解构
    //   // 也就是赋值之后tableData里面的数据==res.data.data里面数组的数据 然后有prop属性所以就可以显示出来了
    //   this.total = res.data.total;
    // });
  },
};
</script>

<style lang="less" scoped>
</style>